<template>
  <el-row>
    <el-col :span="6" class="person_box">
      <el-form label-width="80px">
        <el-form-item label="头像">
          <el-upload
            action="#"
            ref="upload"
            accept=".jpg,.jepg,.png"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="handleChange"
          >
            <el-image
              :src="user.avatar ? user.avatar : '@/assets/defaultAvatar.png'"
              class="avatar_image"
            ></el-image>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input type="text" v-model="user.username" disabled />
        </el-form-item>
        <el-form-item label="账号余额">
          <el-input type="text" :value="wallet" disabled />
        </el-form-item>
        <el-form-item label="原密码">
          <el-input type="text" v-model="originPassword" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="text" v-model="newPassword" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input type="text" v-model="user.nickname" />
        </el-form-item>
        <el-form-item label="手机">
          <el-input type="text" v-model="user.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input type="text" v-model="user.email" />
        </el-form-item>
        <div style="float: right">
          <el-button @click="resetInfo">重置</el-button>
          <el-button type="primary" @click="updateUser">提交</el-button>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import axios from "@/request";
import ossUpload from "@/aliyun-oss";

export default {
  name: "Person",
  data() {
    return {
      user: JSON.parse(JSON.stringify(this.$store.state.userModule.user)).user,
      originPassword: "",
      newPassword: "",
      newAvatarFile: {},
    };
  },
  computed: {
    wallet() {
      let value = this.user.wallet;
      return value == "0"
        ? 0
        : (value =
            value.slice(0, value.length - 2) +
            "." +
            value.slice(value.length - 2));
    },
  },
  methods: {
    handleChange() {
      // this.$refs.upload.uploadFiles：负责帮我们转储文件信息
      // fileList是我们自定义的保存图像的数组
      this.newAvatarFile = this.$refs.upload.uploadFiles[0];
      this.$refs.upload.uploadFiles = [];
      this.user.avatar = URL.createObjectURL(this.newAvatarFile.raw);
    },
    resetInfo() {
      this.user = JSON.parse(
        JSON.stringify(this.$store.state.userModule.user)
      ).user;
      this.originPassword = "";
      this.newPassword = "";
    },
    async updateUser() {
      // 等待头像上传完毕
      if (JSON.stringify(this.newAvatarFile) != "{}") {
        await ossUpload("avatar", this.newAvatarFile.raw).then((res) => {
          this.user.avatar = res;
        });
      }
      axios
        .post("/auth/updateUser", {
          id: this.user.id,
          nickname: this.user.nickname,
          originPassword: this.originPassword,
          newPassword: this.newPassword,
          avatar: this.user.avatar,
          phone: this.user.phone,
          email: this.user.email,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.user = res.data.data;
            let authUser = this.$store.state.userModule.user;
            authUser.user = this.user;
            this.$store.dispatch("userModule/updateUser", authUser);
            this.$message.success("更新成功！");
            this.resetInfo();
          } else {
            this.$message.error(res.data.data);
          }
        })
        .catch((e) => {});
    },
  },
};
</script>

<style scoped>
.person_box {
  padding-left: 40px;
}

.avatar_image >>> .el-image__inner {
  max-height: 120px;
}
</style>